import React, {useEffect, useRef, useState} from "react";
import "./index.scss";
import {ESObjectsManager, ESSceneObject} from "earthsdk3";
import {ESUeViewer} from "earthsdk3-ue";
import {ESCesiumViewer} from "earthsdk3-cesium";
import {ESAlarm} from "earthsdk3";
// 创建 ESObjectsManager 实例
const objm = new ESObjectsManager(ESCesiumViewer);
const ManyPortsSynchronization: React.FC = () => {
    const containerRef1 = useRef<HTMLDivElement>(null);
    const containerRef2 = useRef<HTMLDivElement>(null);
    const containerRef3 = useRef<HTMLDivElement>(null);
    const containerRef4 = useRef<HTMLDivElement>(null);
    // 存储所有视口的引用
    const viewersRef = useRef<{
        viewer1: ESCesiumViewer | undefined;
        viewer2: ESUeViewer | undefined;
        viewer3: ESCesiumViewer | undefined;
        viewer4: ESCesiumViewer | undefined;
    }>({
        viewer1: undefined,
        viewer2: undefined,
        viewer3: undefined,
        viewer4: undefined,
    });
    //当前选中的是第几个视口
    const [currentNum, setCurrentNum] = useState(1);

    useEffect(() => {
        if (
            !containerRef1.current ||
            !containerRef2.current ||
            !containerRef3.current ||
            !containerRef4.current
        )
            return;
        // 初始化 Cesium 视口
        const viewer1 = objm.createCesiumViewer(containerRef1.current);
        //标签(这里注意必须是_ES_Viewer_开头，后续跟一个数字的标签)
        viewer1.devTags = ["_ES_Viewer_1"]
        // 通过json创建一个影像图层
        const poi = objm.createSceneObject('ESPoi2D');
        //标签
        poi.devTags = ["_ES_Viewer_1"]
        // 此处的devTags必须和 viewer1.devTags = ["_ES_Viewer_1"]的标签一样才会生效
        poi.name = "视口1的标签"
        poi.position = [116.3258, 39.12457, 50]
        viewersRef.current.viewer1 = viewer1;
        const viewer2 = objm.createCesiumViewer(containerRef2.current);
        viewer2.devTags = ["_ES_Viewer_2"]
        viewersRef.current.viewer2 = viewer2;
        const viewer3 = objm.createCesiumViewer(containerRef3.current);
        viewer3.devTags = ["_ES_Viewer_3"]
        viewersRef.current.viewer3 = viewer3;
        const viewer4 = objm.createCesiumViewer(containerRef4.current);
        viewer4.devTags = ["_ES_Viewer_4"]
        viewersRef.current.viewer4 = viewer4;
        //默认设置viewer1为主视口
        objm.activeViewer = viewer1;
        console.log("viewerAll", viewer1, viewer2, viewer3, viewer4);
        // 通过json创建一个影像图层
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            type: "ESImageryLayer",
            maximumLevel: 18,
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });
    }, []);
    //
    const changeMainViewer = (num: number) => {
        setCurrentNum(num);
        console.log(`当前选择的是第${num}个视口`);
        switch (num) {
            case 1:
                objm.activeViewer = viewersRef.current.viewer1;
                break;
            case 2:
                objm.activeViewer = viewersRef.current.viewer2;
                break;
            case 3:
                objm.activeViewer = viewersRef.current.viewer3;
                break;
            case 4:
                objm.activeViewer = viewersRef.current.viewer4;
                break;
            default:
                objm.activeViewer = viewersRef.current.viewer1;
        }
    };
    const handleSync = (isOpen: boolean) => {
        objm.syncOtherViewersToActived = isOpen;
    };
    const handelV4 = (isOpen: boolean) => {
        if (isOpen) {
            viewersRef.current.viewer4.syncOtherViewer(objm.activeViewer);
        } else {
            viewersRef.current.viewer4.syncOtherViewer(undefined);
        }
    };
    return (
        <div className="out-container">
            <div className="btn-area">
                <button onClick={() => handleSync(true)}>开始同步</button>
                <button onClick={() => handleSync(false)}>取消同步</button>
                <button onClick={() => handelV4(true)}>v4加入同步</button>
                <button onClick={() => handelV4(false)}>v4取消同步</button>
                <div>当前选中的是{currentNum}个视口</div>
            </div>
            <div className="box">
                {[1, 2, 3, 4].map((id) => (
                    <div
                        key={id}
                        ref={
                            id === 1
                                ? containerRef1
                                : id === 2
                                    ? containerRef2
                                    : id === 3
                                        ? containerRef3
                                        : containerRef4
                        }
                        className={`solo-box ${currentNum === id ? "active-box" : ""}`}
                        onClick={() => changeMainViewer(id)}
                    />
                ))}
            </div>
        </div>
    );
};

export default ManyPortsSynchronization;
